<a href='https://github.com/angular/angular.js/edit/v1.4.x/src/ngRoute/route.js?message=docs(ngRoute)%3A%20describe%20your%20change...#L3' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>


<h1>
  <code>ngRoute</code>
</h1>


  <h2>Installation</h2>

  <p>First include <code>angular-route.js</code> in your HTML:</p>

  <pre><code>&lt;script src=&quot;angular.js&quot;&gt;&#10;&lt;script src=&quot;angular-route.js&quot;&gt;</code></pre>

  <p>You can download this file from the following places:</p>
  <ul>
    <li>
      <a href="https://developers.google.com/speed/libraries/devguide#angularjs">Google CDN</a><br>
      e.g. <code>//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js</code>
    </li>
    <li>
      <a href="http://bower.io">Bower</a><br>
      e.g. <pre><code>bower install angular-route@X.Y.Z</code></pre>
    </li>
    <li>
      <a href="http://code.angularjs.org/">code.angularjs.org</a><br>
      e.g. <pre><code>&quot;//code.angularjs.org/X.Y.Z/angular-route.js&quot;</code></pre>
    </li>
  </ul>
  <p>where X.Y.Z is the AngularJS version you are running.</p>
  <p>Then load the module in your application by adding it as a dependent module:</p>
  <pre><code>angular.module(&#39;app&#39;, [&#39;ngRoute&#39;]);</code></pre>

  <p>With that you&apos;re ready to get started!</p>


<h1 id="ngroute">ngRoute</h1>
<p>The <code>ngRoute</code> module provides routing and deeplinking services and directives for angular apps.</p>
<h2 id="example">Example</h2>
<p>See <a href="api/ngRoute/service/$route#example">$route</a> for an example of configuring and using <code>ngRoute</code>.</p>
<div doc-module-components="ngRoute"></div>

<div class="component-breakdown">
  <h2>Module Components</h2>
  
  <div>
    <h3 class="component-heading" id="directive">Directive</h3>
    <table class="definition-table">
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
      
      <tr>
        <td><a href="api/ngRoute/directive/ngView">ngView</a></td>
        <td><h1 id="overview">Overview</h1>
<p><code>ngView</code> is a directive that complements the <a href="api/ngRoute/service/$route">$route</a> service by
including the rendered template of the current route into the main layout (<code>index.html</code>) file.
Every time the current route changes, the included view changes with it according to the
configuration of the <code>$route</code> service.</p>
</td>
      </tr>
      
    </table>
  </div>
  
  <div>
    <h3 class="component-heading" id="provider">Provider</h3>
    <table class="definition-table">
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
      
      <tr>
        <td><a href="api/ngRoute/provider/$routeProvider">$routeProvider</a></td>
        <td><p>Used for configuring routes.</p>
</td>
      </tr>
      
    </table>
  </div>
  
  <div>
    <h3 class="component-heading" id="service">Service</h3>
    <table class="definition-table">
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
      
      <tr>
        <td><a href="api/ngRoute/service/$route">$route</a></td>
        <td><p><code>$route</code> is used for deep-linking URLs to controllers and views (HTML partials).
It watches <code>$location.url()</code> and tries to map the path to an existing route definition.</p>
</td>
      </tr>
      
      <tr>
        <td><a href="api/ngRoute/service/$routeParams">$routeParams</a></td>
        <td><p>The <code>$routeParams</code> service allows you to retrieve the current set of route parameters.</p>
</td>
      </tr>
      
    </table>
  </div>
  
</div>




